<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        1. 确定事件: 文档加载完成 onload
			2. 事件要触发函数: init()
			3. 函数:操作页面的元素
					要操作表格中每一行
					动态的修改行的背景颜色
        * */
        function init() {
            //得到表格
            var tab = document.getElementById("tab");
            //得到表格中每一行
            var rows = tab.rows;
            //便利所有的行,然后根据奇数 偶数
            for(var i=1; i < rows.length; i++){
                var row = rows[i];  //得到其中的某一行
                if(i%2==0){
                    row.bgColor = "yellow";
                }else{
                    row.bgColor = "red"
                }
            }
        }

        /*
				全选和全不选步骤分析:
				 1.确定事件: onclick 单机事件
				 2.事件触发函数: checkAll()
				 3.函数要去做一些事情:
				 	获得当前第一个checkbox的状态
				 	获得所有分类项的checkbox
				 	修改每一个checkbox的状态
			*/
        function checkAll(){
//				获得当前第一个checkbox的状态
            var check1 = document.getElementById("check1");
            //得到当前checked状态
            var checked = check1.checked;
//				 	获得所有分类项的checkbox
//			var checks = document.getElementsByTagName("input");
            var checks = document.getElementsByName("checkone");
//				alert(checks.length);
            for(var i = 0; i < checks.length; i++){
//				 	修改每一个checkbox的状态
                var checkone = checks[i];
                checkone.checked = checked;
            }
        }
    </script>
</head>
<body onload="init()">
    <table border="1px" align="center" id="tab">
        <td>
            <input type="checkbox" onclick="checkAll()" id="check1">
        </td>
        <td>分类ID</td>
        <td>分类名称</td>
        <td>分类商品</td>
        <td>分类描述</td>
        <td>操作</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="checkone"/>
            </td>
            <td>1</td>
            <td>手机数码</td>
            <td>华为,小米,尼康</td>
            <td>黑马数码产品质量最好</td>
            <td>
                <a href="#">修改</a>|<a href="#">删除</a>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="checkone"/>
            </td>
            <td>2</td>
            <td>成人用品</td>
            <td>充气的</td>
            <td>这里面的充气电动硅胶的</td>
            <td><a href="#">修改</a>|<a href="#">删除</a></td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="checkone"/>
            </td>
            <td>3</td>
            <td>电脑办公</td>
            <td>联想,小米</td>
            <td>笔记本特卖</td>
            <td><a href="#">修改</a>|<a href="#">删除</a></td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="checkone"/>
            </td>
            <td>4</td>
            <td>馋嘴零食</td>
            <td>辣条,麻花,黄瓜</td>
            <td>年货</td>
            <td><a href="#">修改</a>|<a href="#">删除</a></td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="checkone"/>
            </td>
            <td>5</td>
            <td>床上用品</td>
            <td>床单,被套,四件套</td>
            <td>都是套子</td>
            <td><a href="#">修改</a>|<a href="#">删除</a></td>
        </tr>
    </table>
</body>
</html>